.page-suno {
  display: flex
  height: 100%
  overflow: auto
  .left-bar {
    max-width: 320px
    min-width: 320px
    padding: 0 20px 20px 20px
    background: var(--img-group-bg)
    border-radius: 10px
    margin-left: 10px
    span {
      color: var(--img-title-text-color)
    }
    .bar-top {
      display: flex
      flex-flow: row
      justify-content: space-between
    }
    .params {
      padding: 10px 0
      color: rgb(250 247 245)
      position: relative
      .pure-music {
        position: absolute
        right: 0
        top: 17px
        display: flex
        .text {
          font-size: 14px
          color: var(--img-tag-color)
        }
      }
      .label {
        padding: 10px 0 20px 0
        .text {
          margin-right: 5px
          font-size: 13px
        }
        .el-icon {
          width: 0.9em
        }
      }
      .empty-lyrics_btn {
        cursor: pointer
        font-size: 14px
        color: var(--img-tag-color)
      }
      .item {
        margin-bottom: 10px
        position: relative
        .gen-lyrics_btn {
          position: absolute
          bottom: 10px
          left: 10px
          span {
            font-size: 12px
          }
        }
        .el-button.liner-btn {
          width: 100%
          height: 50px
        }
        .song {
          display: flex
          padding: 10px
          background-color: #252020
          border-radius: 10px
          margin-bottom: 10px
          font-size: 14px
          position: relative
          .el-image {
            width: 50px
            height: 50px
            border-radius: 10px
          }
          .title {
            display: flex
            margin-left: 10px
            align-items: center
          }
          .el-button--info {
            position: absolute
            right: 20px
            top: 20px
          }
        }
        .extend-secs {
          padding: 10px 0
          font-size: 14px
          input {
            width: 50px
            text-align: center
            padding: 8px 10px
            font-size: 14px
            background: none
            border: 1px solid #8f8f8f
            margin: 0 10px
            border-radius: 10px
            outline: none
            transition: border-color 0.5s ease, box-shadow 0.5s ease
            &:focus {
              border-color: #0F7A71
              box-shadow: 0 0 5px #0F7A71
            }
          }
        }
        .btn-lyric {
          position: absolute
          left: 14px
          bottom: 14px
          font-size: 10px
          padding: 5px 7px
        }
      }
      .tag-select {
        position: relative
        overflow-x: auto
        overflow-y: hidden
        width: 100%
        .inner {
          display: flex
          flex-flow: row
          padding-bottom: 10px
          .tag {
            margin-right: 10px
            word-break: keep-all
            // background-color: #312C2C
            color: var(--img-tag-color)
            // border-radius: 5px
            padding: 3px 6px
            cursor: pointer
            font-size: 12px
          }
        }
      }
    }
  }
  @keyframes rotate360 {
    from {
      transform: rotate(0deg)
    }
    to {
      transform: rotate(360deg)
    }
  }
  .middle-box {
    height: 100%
    .music-player {
      width: 80%
      margin: 80px auto
      // position: fixed
    }
    .middle-box__item {
      width: 100%
      border-radius: 50%
      .middle-box__item_container {
        padding: 50px 50px 0 50px
        // background: #f8f8f8
        width: 100%
        height: 80%
        .el-image {
          animation: rotate360 25s linear infinite /* 添加旋转动画 */
          border-radius: 50%
          .el-image__error {
            min-height: 500px
          }
        }
        .middle-box_imgbox_func {
          button {
            width: 80px
            height: 30px
            background: var(--img-group-bg)
            border-radius: 5px
            color: var(--img-tag-color)
            font-size: 12px
            margin: 0 15px
            border: none
            &:hover {
              background: #41405A
              color: #CCCCFF
            }
          }
        }
      }
      li {
        // height: 450px
        color: var(--music-text-color)
        flex: 1
        padding: 0 30px
        .title {
          color: var(--music-text-color)
        }
        .el-scrollbar {
          font-size: 13px
        }
      }
    }
  }
  .right-box {
    width: 300px
    min-width: 300px
    color: rgb(250 247 245)
    overflow: hidden
    .waterfall-box {
      overflow-y: scroll /* 一定要指定父元素超出滚动 */
      overflow-x: hidden
      padding: 10px
    }
    .list-box {
      height: 100%
      background: var(--img-history-bg)
      border: solid 1px var(--img-history-border)
      border-radius: 20px
      h3 {
        margin: 15px
        color: var(--img-title-text-color)
      }
      .no-more-data {
        text-align: center
        padding: 30px
      }
      .item {
        display: flex
        flex-flow: row
        padding: 5px 0
        cursor: pointer
        margin-bottom: 10px
        &.active {
          background: var(--history-list-active)
        }
        &:hover {
          background-color: var(--history-list-hover)
        }
        .left {
          .container {
            width: 60px
            height: 90px
            position: relative
            .el-image {
              height: 90px
              border-radius: 5px
            }
            .duration {
              position: absolute
              bottom: 0
              right: 0
              background-color: rgba(38, 34, 56, 0.8)
              padding: 0 5px
              font-family: 'Input Sans'
              font-size: 12px
              border-radius: 0.125rem
              color: var(--img-tag-color)
            }
            .play {
              position: absolute
              width: 56px
              height: 100%
              top: 0
              left: 50%
              border: none
              border-radius: 5px
              background: rgba(100, 100, 100, 0.3)
              cursor: pointer
              color: #ffffff
              opacity: 0
              transform: translate(-50%, 0px)
              transition: opacity 0.3s ease 0s
            }
            &:hover {
              .play {
                opacity: 1
                // display block
              }
            }
          }
        }
        .center {
          width: 100%
          // border 1px solid saddlebrown
          display: flex
          justify-content: center
          align-items: flex-start
          flex-flow: column
          height: 90px
          padding: 0 20px
          .title {
            padding: 6px 0
            font-size: 16px
            font-weight: 700
            color: var(--music-text-color)
            a {
              color: rgb(250 247 245)
              &:hover {
                text-decoration: underline
              }
            }
            .model {
              color: #E2E8F0
              background-color: #1C1616
              border: 1px solid #8f8f8f
              font-weight: normal
              font-size: 14px
              padding: 1px 3px
              border-radius: 5px
              margin-left: 10px
              .iconfont {
                font-size: 12px
              }
            }
          }
          .tags {
            font-size: 14px
            color: #d1d1d1
            padding: 3px 0
            width: 120px
          }
        }
        .right {
          min-width: 220px
          font-size: 14px
          padding: 0 15px
          .tools {
            display: flex
            justify-content: left
            align-items: center
            flex-flow: row
            height: 90px
            .btn-publish {
              padding: 2px 10px
              .text {
                margin-right: 10px
              }
            }
            .btn-icon {
              background: none
              padding: 6px
              transition: background 0.6s ease 0s
              color: #726E6C
              &:hover {
                background: #3C3737
              }
            }
          }
        }
      }
      .task {
        height: 100px
        // background-color: #2A2525
        display: flex
        margin-bottom: 10px
        .left {
          display: flex
          justify-content: left
          align-items: center
          padding: 20px
          width: 90px
          min-width: 90px
          .title {
            font-size: 14px
            color: #e1e1e1
            white-space: nowrap /* 防止文字换行 */
            overflow: hidden /* 隐藏溢出的内容 */
            text-overflow: ellipsis /* 用省略号表示溢出的内容 */
          }
        }
        .center {
          display: flex
          width: 100%
          justify-content: center
          .failed {
            display: flex
            align-items: center
            color: #E4696B
            font-size: 14px
          }
        }
        .right {
          display: flex
          width: 100px
          justify-content: center
          align-items: center
        }
      }
    }
    .pagination {
      padding: 10px 20px
      display: flex
      justify-content: center
    }
    .music-player {
      width: 100%
      position: fixed
      bottom: 0
      left: 50px
      padding: 20px 0
    }
  }
  .btn {
    margin-right: 10px
    background-color: var(--img-group-bg)
    border: none
    border-radius: 5px
    padding: 3px 8px
    cursor: pointer
    i {
      font-size: 12px
      color: var(--img-tag-color)
    }
    &:hover {
      background-color: #5F5958
    }
  }
}
// 新增样式
:deep() {
  .el-switch__core {
    border: solid 1px var(--img-slider-color)
    border-radius: 10px
    border-color: none
  }
}
/* 整个滚动条 */
::-webkit-scrollbar {
  /* width: 8px; 对应纵向滚动条的宽度 */
  height: 6px /* 对应横向滚动条的宽度 */
}
.iconTip {
  color: #5A566D
}
.deafult_style {
  // --el-switch-on-color: #555555
  // --el-color-white: #5C99FF
  zoom: 0.8
  // --el-switch-off-color: none
}